<template>
  <div class="loading">
    <div id="lottie_container2" v-show="prop.isSpin"></div>
    <slot></slot>
    <div class="zz" v-show="prop.isSpin"></div>
  </div>

</template>

<script setup lang="ts">
  import {onMounted} from "vue";
  import lottie from "lottie-web";
  let prop = defineProps(['isSpin'])


  onMounted(() => {
    lottieAnimation()
  })
  async function lottieAnimation() {
    // 使用ES模块的import来加载JSON数据（如果你的项目支持这种方式）
    const animationData = await import('@/assets/json/sun.json');

    // 现在我们可以安全地加载动画
    const anim = lottie.loadAnimation({
      container: document.getElementById('lottie_container2'), // 动画容器的DOM元素
      renderer: 'svg', // 渲染器类型，这里使用SVG
      loop: true, // 是否循环播放
      autoplay: true, // 是否自动播放
      animationData: animationData.default, // 如果使用require，可能需要.default
    });
    // 如果不是异步加载JSON，你可以直接去掉async和await
  }
</script>

<style scoped lang="less">
.loading {

  #lottie_container2 {
    width: 3.76rem;
    height: 3.44rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
  }

  #lottie_container2::after {
    position: absolute;
    width: 2.4rem;
    content: 'Loading....';
    color: #ffbc3c;
    font-size: .6rem
  }

  .zz {
    position: fixed;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    opacity: .8;
    z-index: 9998;
  }

}

</style>